<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html>
<style type="text/css">
body, html {
	font-family: "microsoft yahei"
}

.main {
	width: 971px;
	zoom: 1;
	margin: 100px auto;
}

.main h2 {
	text-align: center;
	font-size: 28px;
	color: #666;
	text-align: center;
}

.page_btn {
	padding-top: 40px;
	text-align: center;
}

.page_btn a {
	cursor: pointer;
	padding: 10px 17px;
	border: solid 1px #dbdbdb;
	font-size: 14px;
}

.num {
	padding: 0 10px;
}

.page_btn a:hover, .page-item:hover {
	color: #fff;
	background: #e84c3d;
	border: 1px solid #e84c3d;
}

.page-item {
	padding: 10px 17px;
	text-decoration: none;
	background-color: #ffffff;
	border: 1px solid #dbdbdb;
	color: #666666;
	margin: 0 3px;
	font-size: 14px;
	cursor: pointer;
}

.page-item.current {
	color: #fff;
	background: #e84c3d;
	cursor: pointer;
	border: 1px solid #e84c3d;
}

table {
	border-spacing: 0;
	border-collapse: collapse;
}

.table-integral thead {
	background: #f7f7f7;
	height: 35px;
	text-align: center;
	line-height: 35px;
	font-size: 14px;
	color: #333;
}

.table-integral td {
	border: 1px solid #e5e5e5;
	border-collapse: collapse;
}

.table-integral tbody {
	height: 45px;
	line-height: 45px;
	font-size: 14px;
	color: #666;
	text-align: center;
	line-height: 45px;
}

.table-integral td {
	border: 1px solid #e5e5e5;
	border-collapse: collapse;
}

.text-green {
	color: #00a65a !important;
}

.text-red {
	color: #dd4b39 !important;
}

.table-integral td a, .table-integral td a:hover, .table-integral td a:active,
	.table-integral td a:visited, .table-integral td a:focus {
	color: #0099cc;
	cursor: pointer;
	text-decoration: none;
}

.tips_info {
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.5);
	font-size: 18px;
	color: #fff;
	text-align: center;
	line-height: 60px;
	display: none;
	padding: 0 30px;
	z-index: 9999;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	max-width: 250px;
	height: 60px;
}
</style>
<script type="text/javascript">
//删除选中文章 (我的文章)
function delMyBlog(){
var ques_id = [];
$("[name=quanxuan]:checked").each(function(){
ques_id.push($(this).val());
}); 
if(ques_id!='' && ques_id!=null){
alert("确定要删除吗？");
$.post('../../Blog/deleteImByIds.do',{'qid':ques_id},function(data){
if (data == "0")
alert("删除失败！");
else {
alert("删除成功！");
window.location='fav_blog.html';
getusers();
}
});
}else{
layer.msg('请先选择要删除的文章');
} 
}
</script>







<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
	function Pagination($content, $wrap, options) {
		this.$wrap = $wrap;
		this.$content = $content;
		this.options = $.extend({}, Pagination.defaultOptions, options);
		this.init();
	}
	Pagination.defaultOptions = {
		size : 4
	};
	Pagination.prototype.init = function() {
		var totalItemNum = this.$content.children().length;
		var totalPageNum = this.totalPageNum = Math.ceil(totalItemNum
				/ this.options.size);
		this.currentPage = 1;
		this.$wrap.empty();
		this.$content.children(':gt(' + (this.options.size - 1) + ')').hide();
		this.$wrap.append([ '<span class="page_box">',
				'<a class="prev">上一页</a>', '<span class="num">', '</span>',
				'<a class="next">下一页</a>', '</span>' ].join(''));
		for (var i = 0; i < totalPageNum; i++) {
			var $btn = $('<span class="page-item">' + (i + 1) + '</span>');
			$btn.data('page', i + 1);
			this.$wrap.find('.num').append($btn);
		}
		this.$wrap.find('.num').children().eq(0).addClass('current');
		this.initEvents();
	};
	Pagination.prototype.initEvents = function() {
		var _this = this;
		var $prev = this.$wrap.find('.prev');
		var $next = this.$wrap.find('.next');
		var $num = this.$wrap.find('.num');

		$prev.on('click', function() {
			_this.prev();
		});
		$next.on('click', function() {
			_this.next();
		});
		$num.on('click', '.page-item', function() {
			var page = $(this).data('page');
			_this.goTo(page);
		});
	};
	Pagination.prototype.prev = function() {
		this.goTo(this.currentPage - 1);
	};
	Pagination.prototype.next = function() {
		this.goTo(this.currentPage + 1);
	};
	Pagination.prototype.goTo = function(num) {
		if (typeof num !== 'number') {
			throw new Error('e');
		}
		if (num > this.totalPageNum || num <= 0) {
			return false;
		}

		this.currentPage = num;

		this.$wrap.find('.num').children().eq(this.currentPage - 1).addClass(
				'current').siblings('.current').removeClass('current');

		var left = (this.currentPage - 1) * this.options.size;
		var right = left + this.options.size;

		var $shouldShow = this.$content.children().filter(function(index) {
			return left <= index && index < right;
		});
		this.$content.children().hide();
		$shouldShow.show();
	};


</script>



<script type="text/javascript">
function quanxuan(a)
{
    //找到下面所有的复选框
    var ck =document.getElementsByClassName("qx");
    
    //遍历所有复选框，设置选中状态。
    for(var i=0;i<ck.length;i++)
    {
        if(a.checked)//判断全选按钮的状态是不是选中的
        {
            ck[i].setAttribute("checked","checked");//如果是选中的，就让所有的状态为选中。
        }
        else
        {
            ck[i].removeAttribute("checked");//如果不是选中的，就移除所有的状态是checked的选项。
        }
    }
}
</script>
<!--加载meta IE兼容文件-->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
	<div class="header">
		<div class="menu-btn">
			<div class="menu"></div>
		</div>
		<h1 class="logo">
			<a href="index.jsp"> <span>MYBLOG</span> <img src="img/logo.png">
			</a>
		</h1>
		<div class="nav">
			<a href="index">文章</a> <a href="whisper">微语</a> <a href="leacots">留言</a>
			<a href="album">相册</a> <a href="about" class="active">我的文章</a>
		</div>
		<ul class="layui-nav header-down-nav">
			<li class="layui-nav-item"><a href="index">文章</a></li>
			<li class="layui-nav-item"><a href="whisper">微语</a></li>
			<li class="layui-nav-item"><a href="leacots">留言</a></li>
			<li class="layui-nav-item"><a href="album">相册</a></li>
			<li class="layui-nav-item"><a href="about" class="active">我的文章</a></li>
			<li class="layui-nav-item"><a href="about">文章详情</a></li>
		</ul>
		<p class="welcome-text">
			欢迎<span class="name" style="color: red; font-size: 30px;">${user.u_name }</span>来到Myblog~
		</p>
	</div>
	<!-- 显示我的发布文章 -->
	<div class="main_1">
		<form action="getItemById" method="post">
			<h2>已发布文章</h2>
			<table class="table-integral">
				<thead>
					<tr>
						<td style="width: 100px;"><input type="checkbox"
							name="chooseQX" id="allCK" onclick=""
							value="${item.id }" />全选</td>
						<td style="width: 100px;">文章ID</td>
						<td style="width: 300px;">文章标题</td>
						<td style="width: 200px;">阅读人数</td>
						<td style="width: 145px;">点赞数</td>
						<td style="width: 250px;">发布时间</td>
						<td style="width: 140px;">操作</td>
					</tr>
				</thead>
				<tbody id="content_page">
					<c:forEach items="${ArticleContent}" var="article">
						<tr>
							<td><input type="checkbox" class="loginName" id="listCK"
								value="${item.id }" /></td>
							<td><div>${article.a_id}</div></td>
							<td><div>${article.a_name}</div></td>
							<td>${article.a_pageview}</td>
							<td class="text-green">${article.a_love}</td>
							<td><fmt:formatDate value="${article.a_postTime}" /></td>
							<td>
								<button type="button">
									<!-- 删除当前项 -->
					<a href="deleteItemById?a_id=${article.a_id}" onClick="return confirm('确定删除?');">删 除 </a>
								</button>
								<button type="button">
									<!-- 修改当前项 -->
									<a href="#">修 改</a>
								</button>
							</td>
						
						</tr>
					</c:forEach>

				</tbody>
			</table>
			<!-- 批量选择,提交到服务器 -->
			<input type="submit" value="删除选中的" onclick="delMyBlog()">
		</form>
		<div id="wrap" class="page_btn clear"></div>
	</div>
	<!--main-->
	<!--显示我的删除文章-->
<div class="main_2">
<form action="SelectPersonalDeleted" method="post">
			<h2>已删除文章</h2>
			<table class="table-integral">
				<thead>
					<tr>
						<td style="width: 100px;"><input type="checkbox"
							name="chooseQX" id="allCK" onclick=""
							value="${item.id }" />全选</td>
						<td style="width: 100px;">文章ID</td>
						<td style="width: 300px;">文章标题</td>
						<td style="width: 200px;">阅读人数</td>
						<td style="width: 145px;">点赞数</td>
						<td style="width: 250px;">发布时间</td>
						<td style="width: 140px;">操作</td>
					</tr>
				</thead>
				<tbody id="content_page">
					<c:forEach items="${ArticleDelete}" var="article">
						<tr>
							<td><input type="checkbox" class="loginName" id="listCK"
								value="${item.id }" /></td>
							<td><div>${article.a_id}</div></td>
							<td><div>${article.a_name}</div></td>
							<td>${article.a_pageview}</td>
							<td class="text-green">${article.a_love}</td>
							<td><fmt:formatDate value="${article.a_postTime}" /></td>
							<td>
								<button type="button">
									<!-- 删除当前项 -->
					<a href="deleteItemById?a_id=${article.a_id}" onClick="return confirm('确定删除?');">删 除 </a>
								</button>
								<button type="button">
									<!-- 修改当前项 -->
									<a href="#">修 改</a>
								</button>
							</td>
						
						</tr>
					</c:forEach>

				</tbody>
			</table>
			<!-- 批量选择,提交到服务器 -->
			<input type="submit" value="删除选中的" onclick="delMyBlog()">
		</form>
		<div id="wrap" class="page_btn clear"></div>
</div>
<!--显示我的未发布文章-->
<div class="main_3">
<form action="getItemById" method="post">
			<h2>未发布文章</h2>
			<table class="table-integral">
				<thead>
					<tr>
						<td style="width: 100px;"><input type="checkbox"
							name="chooseQX" id="allCK" onclick=""
							value="${item.id }" />全选</td>
						<td style="width: 100px;">文章ID</td>
						<td style="width: 300px;">文章标题</td>
						<td style="width: 200px;">阅读人数</td>
						<td style="width: 145px;">点赞数</td>
						<td style="width: 250px;">发布时间</td>
						<td style="width: 140px;">操作</td>
					</tr>
				</thead>
				<tbody id="content_page">
					<c:forEach items="${ArticleNotRelease}" var="article">
						<tr>
							<td><input type="checkbox" class="loginName" id="listCK"
								value="${item.id }" /></td>
							<td><div>${article.a_id}</div></td>
							<td><div>${article.a_name}</div></td>
							<td>${article.a_pageview}</td>
							<td class="text-green">${article.a_love}</td>
							<td><fmt:formatDate value="${article.a_postTime}" /></td>
							<td>
								<button type="button">
									<!-- 删除当前项 -->
					<a href="deleteItemById?a_id=${article.a_id}" onClick="return confirm('确定删除?');">删 除 </a>
								</button>
								<button type="button">
									<!-- 修改当前项 -->
									<a href="#">修 改</a>
								</button>
							</td>
						
						</tr>
					</c:forEach>

				</tbody>
			</table>
			<!-- 批量选择,提交到服务器 -->
			<input type="submit" value="删除选中的" onclick="delMyBlog()">
		</form>
		<div id="wrap" class="page_btn clear"></div>

</div>


	<div id="info_modal" class="tips_info"></div>
	<div class="footer-wrap">
		<div class="footer w1000">
			<div class="qrcode">
				<img src="img/erweima.jpg">
			</div>
			<div class="practice-mode">
				<img src="img/down_img.jpg">
				<div class="text">
					<h4 class="title">我的联系方式</h4>
					<p>
						微信<span class="WeChat">1234567890</span>
					</p>
					<p>
						手机<span class="iphone">1234567890</span>
					</p>
					<p>
						邮箱<span class="email">1234567890@qq.com</span>
					</p>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="layui/layui.js"></script>
	<script type="text/javascript">
		layui.config({
			base : 'js/util/'
		}).use(
				[ 'element', 'laypage', 'form', 'layer', 'menu' ],
				function() {
					element = layui.element, laypage = layui.laypage,
							form = layui.form, layer = layui.layer,
							menu = layui.menu;
					menu.init();
				})
	</script>
</body>
</html>